<!DOCTYPE>
<html>
  <head>
	<link href="static/css/global/generic.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.css">
	<link href="static/css/page/translateDialog.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="static/javascript/jquery.min.js"></script>
	<title>dialog</title>
  </head>
  
  <body>
  	<div class="translatedialog font">
  	    <div class="translatedialog-title">
  	       <p>APPLY TRANSLATION SERVICE</p>
  	       <ul>
  	         <li>APPLY SERVICE</li>
  	         <li class="acticestep">POST TEXT</li>
  	         <li>PAY</li>
  	         <li>PROCESSING(WITHIN 3 DAYS)</li>
  	         <li style="background: none;">RECEIVE</li>
  	       </ul>
  	    </div>
  	    <div class="translatedialog-content">
  	      <ul class="translatedialog-tab left">
  	         <li class="activeoption">PRODUCT</li>
  	         <li>STORE INFO</li>
  	         <li>PROJECT</li>
  	         <li>ALL</li>
  	       </ul>
           <div class="tixing left">WHAT CAN WE TRANSLATE FOR YOU ? PLEASE SELECT THE TAB.</div>
  	       <ul class="translatedialog-inputarea">
  	          <li style="display:block;">
  	               <div class="row">
				<div class="col-xs-2"><label class="" for="productName">PRODUCT NAME:</label></div>
				<div class="col-xs-9">
				   <input type="text" class="form-control" id="productName" name="productName"
					placeholder="" required="" maxlength="20" />
			    </div>
		   </div>
		   <div class="row">
				<div class="col-xs-2"><label class="" for="productName">BRAND:</label></div>
				<div class="col-xs-9">
				   <input type="text" class="form-control" id="productName" name="productName"
					placeholder="" required="" maxlength="20" />
			    </div>
		   </div>
		   <div class="row">
				<div class="col-xs-2"><label class="" for="productName">MATETIAL:</label></div>
				<div class="col-xs-9">
				   <input type="text" class="form-control" id="productName" name="productName"
					placeholder="" required="" maxlength="20" />
			    </div>
		   </div>
		   <div class="row">
				<div class="col-xs-3"><label class="" for="productName">PRODUCT DESCRIPTION:</label></div>
				<div class="col-xs-11">
				   <textarea style="height: 200px;" class="form-control" id="productName" name="productName"></textarea>
			    </div>
		   </div>
		   <div class="row">
				<div class="col-xs-3"><label class="" for="productName">LOGISTIC & SERVISE:</label></div>
				<div class="col-xs-11">
				   <textarea style="height: 200px;" class="form-control" id="productName" name="productName"></textarea>
			    </div>
		   </div>
  	          </li>
  	          <li>
  	          <div class="row">
				<div class="col-xs-3"><label class="" for="productName">STH. TO SAY:</label></div>
				<div class="col-xs-11">
				   <textarea style="height: 200px;" class="form-control" id="productName" name="productName"></textarea>
			    </div>
		      </div></li>
  	          <li><div class="row">
				<div class="col-xs-3"><label class="" for="productName">PROJECT DESCRIPTION:</label></div>
				<div class="col-xs-11">
				   <textarea style="height: 200px;" class="form-control" id="productName" name="productName"></textarea>
			    </div>
		   </div></li>
  	      </ul>
		   
		   <div class="row">
		        <div class="col-xs-11">
				     <input type="button" class="nextBtn" value="NEXT">
				</div>
		   </div>
		   
  	    </div>
  	</div>
  	
  	
  	<!-- PAY -->
  	<div class="paydialog font">
  	    <a href="javascript:void(0)" onClick="$('.paydialog').hide();"></a>
  	    <div class="paydialog-content">
  	       YOUR POST <span>20,000 WORDS</span> IN TOTAL.<br>
  	       THE PRICE IS <span>RMB 200</span>.
  	    </div>
  	    <input type="button" class="nextBtn payBtn" value="PROCESS TO PAY">
  	</div>
  	<!-- PAY -->
  	
  	<!-- SUCCESS -->
  	<div class="successdialog font">
  	    <a href="javascript:void(0)" onClick="$('.successdialog').hide();"></a>
  	    <div class="successdialog-content">
  	       <span>SUCCESS!</span>
  	       <p>PLEASE GO TO YOUR TRANSLATION LIST TO CHECK TOUR ORDER.THANKS FOR YOUR ORDER!</p>
  	    </div>
  	    <input type="button" class="nextBtn successBtn" value="GO TO TRANSLATION LIST">
  	</div>
  	<!-- SUCCESS -->
  	
  </body>
  
  <script>
	$(function(){
		window.onload = function()
		{
			var $li = $('.translatedialog-tab li');
			var $ul = $('.translatedialog-inputarea li');
						
			$li.mouseover(function(){
				var $this = $(this);
				var $t = $this.index();
				$li.removeClass();
				$this.addClass('activeoption');
				$ul.css('display','none');
				if($t==3){
					$ul.each(function(){
						$(this).css('display','block');	
					})
				}else{
					$ul.eq($t).css('display','block');
				}
			
			});
		}
	});
</script>

</html>
